<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <title>01_v-text_指令</title>
</head>
<body>
    
    <!-- 
            学过的的指令：
                v-bind      ：单项绑定解析表达式 简写 :xx
                v-model     ：双向绑定 
                v-for       ：遍历数组/对象/字符串
                v-on        ：绑定事件，简写为 @
                v-if        ：条件渲染（动态控制节点是否存在）
                v-else-if   ：条件渲染（动态控制节点是否存在）
                v-show      ：条件渲染（动态控制节点是否展示）

            v-text指令：
                1.作用：向其所在的节点中渲染文本内容
                2.与插值语法的区别：v-text 会替换掉节点中的内容，{{xxx}}则不会
            
     -->


    <!-- 容器 -->
    <div id="root">
        <div>{{name}}</div>
        <div v-text="name">hhh哈哈哈</div>
        <div v-text="test1"></div>
        <div>{{test1}}</div>
        
    </div>

    <script type="text/javascript">
       Vue.config.productionTip=false; // 阻止 vue 在启动时生成生产提示。

       
       new Vue({
            el:'#root',
            data:{
                name:'李淳罡',
                test1:'<h1>木马牛<h1>'
            }
        })
 
       
    </script>
</body>
</html>